import type { Metadata } from "next";
import Link from "next/link";
import { getLocale } from "@/lib/i18n/server";
import { href, t } from "@/lib/i18n";
import { methodsWithCounts } from "@/lib/papers/queries";
export const revalidate = 300;
export async function generateMetadata(): Promise<Metadata> { const d = t(await getLocale()); return { title: d.methods.title, description: d.methods.lead, alternates: { canonical: "/methods" } }; }
export default async function MethodsPage() {
  const locale = await getLocale(); const d = t(locale); const rows = await methodsWithCounts();
  const cats = [...new Set(rows.map((r) => r.category))];
  return (
    <div className="container py-10">
      <h1 className="text-3xl sm:text-4xl">{d.methods.title}</h1><p className="meta mt-2 max-w-3xl">{d.methods.lead}</p>
      {cats.map((c) => <section key={c} className="mt-10"><h2 className="label mb-3">{c}</h2><ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">{rows.filter((r) => r.category === c).map((m) => <li key={m.slug} className="card p-4"><Link href={href(locale, `/methods/${m.slug}`)} className="text-fg no-underline hover:underline font-medium">{locale === "fr" ? m.name_fr : m.name_en}</Link><p className="meta mt-1">{m.n} {m.n === 1 ? d.topics.paper : d.topics.papers}</p><p className="mt-2 flex flex-wrap gap-1">{(m.papers as { slug: string; identifier: string }[]).slice(0, 8).map((p) => <Link key={p.slug} href={href(locale, `/papers/${p.slug}`)} className="chip no-underline font-mono">{p.identifier}</Link>)}</p></li>)}</ul></section>)}
    </div>
  );
}